<template>
  <view class="list">
    <uni-nav-bar dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF" status-bar
      left-icon="left" title="投注记录" @clickLeft="back" />
    <view class="list_flex" v-for="(item,index) in list" :key="index">
      <view class="item_num">
        第{{item.record_number}}期
      </view>
      <view class="item_se u-flex u-ju-around">
        <view :class="'shaizi' + item1" v-for="(item1,index1) in item.record_result" :key="index1">

        </view>
        <view :class="item.result_number>=11 ? 'big':'small'">

        </view>
      </view>
      <view class="heng">

      </view>
      <view class="user_xia u-flex" v-if="item.prize">
        <view class="user_xia_three" v-if="item.prize['i2']">
          <image src="../../../static/mine/game/111.png" mode=""></image>
          <span>{{item.prize['i2'].win}}</span>
        </view>
        <view class="user_xia_three" v-if="item.prize['i3']">
          <image src="../../../static/mine/game/333.png" mode=""></image>
          <span>{{item.prize['i3'].win}}</span>
        </view>
        <view class="user_xia_three" v-if="item.prize['i4']">
          <image src="../../../static/mine/game/666.png" mode=""></image>
          <span>{{item.prize['i4'].win}}</span>
        </view>
        <view class="user_xia_three" v-if="item.prize['i0']">
          <image src="../../../static/mine/game/big.png" mode=""></image>
          <span>{{item.prize['i0'].win}}</span>
        </view>
        <view class="user_xia_three" v-if="item.prize['i1']">
          <image src="../../../static/mine/game/small.png" mode=""></image>
          <span>{{item.prize['i1'].win}}</span>
        </view>
      </view>
      <view class="user_xia" v-else>
        未下注
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getDiceRecord
  } from '@/api/mine/game.js'
  export default {
    data() {
      return {
        page: 0,
        list: []
      }
    },
    methods: {
      /**
       * 返回
       */
      back() {
        uni.navigateBack()
      },
      // 获取历史记录
      getDiceList(type = 'getlist') {
        getDiceRecord({
          page: this.page
        }).then(res => {
          if (type == 'getlist') {
            this.list = res.data
          } else {
            this.list = [...this.list, ...res.data]
          }
        })
      }
    },
    onShow() {
      this.page = 0
      this.getDiceList()
    },
    onReachBottom() {
      this.page++
      this.getDiceList('push')
    }
  }
</script>

<style lang="less">
  .list {
    min-height: 100vh;
    background-image: url('@/static/mine/game/bg.png');
    background-size: 100%;

    .list_flex {
      position: relative;
      margin: 20rpx auto;
      width: 92%;
      height: 180rpx;
      border-radius: 10rpx;
      background-color: rgba(0, 0, 0, 0.6);

      .item_num {
        position: absolute;
        top: 30rpx;
        left: 30rpx;
        color: #fff;
        font-size: 24rpx;
      }

      .user_xia {
        position: absolute;
        width: 400rpx;
        top: 120rpx;
        left: 30rpx;
        font-size: 24rpx;
        color: aliceblue;

        view {
          width: 40rpx;
          height: 40rpx;
        }

        .user_xia_three {
          display: flex;
          margin-right: 10rpx;
          width: 85rpx;

          image {
            width: 40rpx;
            height: 40rpx;
          }

          span {
            font-size: 24rpx;
          }
        }
      }

      .heng {
        position: absolute;
        top: 90rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 92%;
        height: 2rpx;
        background-color: rgba(255, 255, 255, 0.5);
      }

      .item_se {
        width: 250rpx;
        height: 30rpx;
        position: absolute;
        top: 30rpx;
        right: 30rpx;

        view {
          width: 30rpx;
          height: 30rpx;
        }

        .big {
          background: url('@/static/mine/game/big.png') no-repeat center;
          background-size: 100% auto;
        }

        .small {
          background: url('@/static/mine/game/small.png') no-repeat center;
          background-size: 100% auto;
        }

        .shaizi1 {
          background: url('@/static/mine/game/s1.png') no-repeat center;
          background-size: 100% auto;
        }

        .shaizi2 {
          background: url('@/static/mine/game/s2.png') no-repeat center;
          background-size: 100% auto;
        }

        .shaizi3 {
          background: url('@/static/mine/game/s3.png') no-repeat center;
          background-size: 100% auto;
        }

        .shaizi4 {
          background: url('@/static/mine/game/s4.png') no-repeat center;
          background-size: 100% auto;
        }

        .shaizi5 {
          background: url('@/static/mine/game/s5.png') no-repeat center;
          background-size: 100% auto;
        }

        .shaizi6 {
          background: url('@/static/mine/game/s6.png') no-repeat center;
          background-size: 100% auto;
        }
      }
    }
  }
</style>
